<template>
    <el-drawer v-model="visible" :with-header="false" :size="1000" destroy-on-close @closed="$emit('closed')">
        <el-container v-loading="loading">
            <el-main style="padding:20px 20px 20px 20px" class="">
                <el-container class="is-vertical">
                    <sc-title title="薪资明细"></sc-title>
                    <div>
                        <el-tabs v-model="activeName" @tab-click="tabClickFun">
                            <el-tab-pane label="基本信息" name="first">
                                <el-form ref="form" label-width="120px" class="formshows" label-position="right" size="small">
                                    <div class="info">
                                        <el-row>
                                            <el-col :span="24">
                                                <el-row>
                                                    <el-col :span="12">
                                                        <el-form-item label="教练姓名:">{{info?.teacher?.name}}</el-form-item>
                                                        <el-form-item label="采用配置:">教练个人配置</el-form-item>
                                                    </el-col>
                                                    <el-col :span="12">
                                                        <el-form-item label="薪资月份:">{{info?.date}}</el-form-item>
                                                        <el-form-item label="薪资总额:">{{info?.totalSalary}}</el-form-item>
                                                    </el-col>
                                                </el-row>
                                            </el-col>
                                        </el-row>
                                    </div>
									
                                    <div class="info">
                                        <div class="tcontainer">
                                            <div class="title" style="padding-bottom: 0px;"></div>
                                        </div>
                                        <el-row>
                                            <el-main class="nopadding">
                                                <el-table :data="courseStatistics || []" :summary-method="getSalarysSummaries" show-summary style="width: 100%">
                                                    <el-table-column prop="name" label="项目" align="left"></el-table-column>
                                                    <el-table-column prop="number" label="数量" align="center">
                                                        <template #default="scope">
                                                            {{ scope.row.number }}
                                                        </template>
                                                    </el-table-column>
                                                    <el-table-column prop="price" label="单价/元" align="center">
                                                    </el-table-column>
                                                    <el-table-column prop="total" label="小计" align="center" ></el-table-column>
                                                </el-table>
                                            </el-main>
                                        </el-row>
                                    </div>
                                </el-form>
                            </el-tab-pane>
                           
                        </el-tabs>
                    </div>
                </el-container>
            </el-main>
            <el-footer>
                <el-button @click="visible=false">关闭</el-button>
            </el-footer>
        </el-container>
    </el-drawer>

</template>

<script>
export default {
    components: {
    },
    data() {
        return {
            visible: false,
            loading: false,
            info: {},
            infoId: null,
            teacherId: null,
            activeName: 'first',
            courseStatistics: []
        }
    },
    mounted() {
     
    },
    methods: {
        open(id, teacherId, activeName) {
            this.activeName = activeName || 'first'
            this.visible = true
            this.infoId = id
            this.teacherId = teacherId
            this.getData()
        },
        async getData() {
            this.loading = true
            await this.$API.teacher.salary.calculateInfo.get({id: this.infoId, teacherId: this.teacherId}).then((res) => {
                this.info = res.data

                let classHour30Statistics = this.info.classHour30Statistics
                let classHour60Statistics = this.info.classHour60Statistics
                let classHour120Statistics = this.info.classHour120Statistics
                let trialCourseStatistics = this.info.trialCourseStatistics


                let courseStatistics = []
                courseStatistics.push({name: '基本工资', number: 1, price: this.info.basicSalary, total: this.info.basicSalary})

                courseStatistics.push({name: '抗遗忘', number: this.info.forgetNumber, price: this.info.forgetSalary, total: this.info.forgetSalary * this.info.forgetNumber})

                if (classHour30Statistics) {
                    if (classHour30Statistics.onlineNumber) {
                        let total = classHour30Statistics.onlineNumber * this.info.classHour30
                        courseStatistics.push({name: '30分钟课-线上', number: classHour30Statistics.onlineNumber, price: this.info.classHour30, total: total})
                    }
                    if (classHour30Statistics.agentNumber) {
                        let total = classHour30Statistics.agentNumber * this.info.classHour30
                        courseStatistics.push({name: '30分钟课-机构', number: classHour30Statistics.agentNumber, price: this.info.classHour30, total: total})
                    }
                    if (classHour30Statistics.offlineNumber) {
                        let total = classHour30Statistics.offlineNumber * this.info.classHour30
                        courseStatistics.push({name: '30分钟课-上门', number: classHour30Statistics.offlineNumber, price: this.info.classHour30, total: total})
                    }
                }

                if (classHour60Statistics) {
                    if (classHour60Statistics.onlineNumber) {
                        let total = classHour60Statistics.onlineNumber * this.info.classHour60
                        courseStatistics.push({name: '60分钟课-线上', number: classHour60Statistics.onlineNumber, price: this.info.classHour60, total: total})
                    }
                    if (classHour60Statistics.agentNumber) {
                        let total = classHour60Statistics.agentNumber * this.info.classHour60
                        courseStatistics.push({name: '60分钟课-机构', number: classHour60Statistics.agentNumber, price: this.info.classHour60, total: total})
                    }
                    if (classHour60Statistics.offlineNumber) {
                        let total = classHour60Statistics.offlineNumber * this.info.classHour60
                        courseStatistics.push({name: '60分钟课-上门', number: classHour60Statistics.offlineNumber, price: this.info.classHour60, total: total})
                    }
                }

                if (classHour120Statistics) {
                    if (classHour120Statistics.onlineNumber) {
                        let total = classHour120Statistics.onlineNumber * this.info.classHour120
                        courseStatistics.push({name: '120分钟课-线上', number: classHour120Statistics.onlineNumber, price: this.info.classHour120, total: total})
                    }
                    if (classHour120Statistics.agentNumber) {
                        let total = classHour120Statistics.agentNumber * this.info.classHour120
                        courseStatistics.push({name: '120分钟课-机构', number: classHour120Statistics.agentNumber, price: this.info.classHour120, total: total})
                    }
                    if (classHour120Statistics.offlineNumber) {
                        let total = classHour120Statistics.offlineNumber * this.info.classHour120
                        courseStatistics.push({name: '120分钟课-上门', number: classHour120Statistics.offlineNumber, price: this.info.classHour120, total: total})
                    }
                }

                if (trialCourseStatistics) {
                    if (trialCourseStatistics.onlineNumber) {
                        let total = trialCourseStatistics.onlineNumber * this.info.trialCourse
                        courseStatistics.push({name: '体验课-线上', number: trialCourseStatistics.onlineNumber, price: this.info.trialCourse, total: total})
                    }
                    if (trialCourseStatistics.agentNumber) {
                        let total = trialCourseStatistics.agentNumber * this.info.trialCourse
                        courseStatistics.push({name: '体验课-机构', number: trialCourseStatistics.agentNumber, price: this.info.trialCourse, total: total})
                    }
                    if (trialCourseStatistics.offlineNumber) {
                        let total = trialCourseStatistics.offlineNumber * this.info.trialCourse
                        courseStatistics.push({name: '体验课-上门', number: trialCourseStatistics.offlineNumber, price: this.info.trialCourse, total: total})
                    }
                }

                this.courseStatistics = courseStatistics
                this.loading = false
            }, () => {
                this.loading = false
            })
        },
        getSalarysSummaries(param) {
            const { columns, data } = param;
            const sums = [];
            columns.forEach((column, index) => {
                if (index === 0) {
                    sums[index] = '合计';
                    return;
                }

                if (index == 1 || index == 2) {
                    sums[index] = '';
                    return;
                }
                
                const values = data.map(item => Number(item[column.property]));
                if (!values.every(value => isNaN(value))) {
                    sums[index] = values.reduce((prev, curr) => {
                        const value = Number(curr);
                        if (!isNaN(value)) {
                            return prev + curr;
                        } else {
                            return prev;
                        }
                    }, 0);
                    if (index == 3) {
                        sums[index] += '元';
                    }
                } else {
                    sums[index] = ' ';
                }
            });
            return sums
        },
    }
}
</script>

<style scoped>
.tcontainer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 10px;
}
.title {
    font-size: 14px;
    padding-left: 6px;
    font-weight: 500;
    padding-bottom: 20px;
}
.info {
    padding-bottom: 10px;
    margin-bottom: 10px;
}
.info:last-child {
    border: none;
    padding-bottom: 0;
    margin-bottom: 0;
}
[data-theme="dark"] .info {
    border-color: #434343;
}
:deep(.el-form-item__content) {
    font-size: 12px !important;
}
:deep(.el-image-viewer__close) {
    background-color: unset;
}
.el-form-item__label {
    text-align: justify;
}
</style>
